<template>
	<view>
		<ttBar leftIcon="icon-back" title="学员列表">
			<template v-slot:rightCnt>
				<view class="rgt" @tap="toAdd">
					<text class="rt">添加</text>
				</view>
			</template>
		</ttBar>
		<view class="memberList" v-if="memberList.length>0">
			<view class="row"  v-for="(item,index) in memberList" :key="index" @tap="tapRow(index)">
				<text>{{item.name}}</text>
				<text class="tel">{{item.phone}}</text>
			</view>
		</view>
		<emptyBox v-if="memberList.length<1" :isLoding="loding"></emptyBox>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				isLogin:state=>state.user.isLogin,
			})
		},
		data() {
			return {
				hasNext:true,
				page_no:1,
				memberList:[],
				isSelect:true,
				loding:true
			};
		},
		methods:{
			getData(){
				if(this.hasNext){
					this.loding=true;
					this.$store.dispatch("apiGetMemberList",{
						userId:this.userInfo.userId,
						page_no:this.page_no,
						page_size:10
					}).then(res=>{
						this.memberList=this.memberList.concat(res.data.data.items);
						this.hasNext=res.data.data.hasNext;
						this.page_no=res.data.data.nextPage;
						this.loding=false;
					})
				}else{
					uni.showToast({
						title: '没有更多的数据了',
						icon: 'none'
					});
				}
			},
			tapRow(e){
				let _index=parseInt(e);
				if(this.isSelect){		//选择
					uni.$emit("selectMember",{index:_index});
					uni.navigateBack({
						delta:1
					})
				}else{		//编辑
					let _data=this.memberList[_index];
					_data.url="addMember"
					this.toPage(_data)
				}
			},
			toAdd(){
				this.toPage({
					url:'addMember'
				})
			}
		},
		onLoad(cfm) {
			let _s=parseInt(cfm.select)
			this.isSelect=_s==1?true:false
			this.getData();
			uni.$on("shuaxin",()=>{
				this.hasNext=true;
				this.page_no=1;
				this.memberList=[];
				this.getData();
			})
		},
		// 页面滚动到底部
		onReachBottom() {
			
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.rgt {
		display: flex;
		align-items: center;
		margin-right: -10upx;
	}

	.rt {
		font-size: 28upx;
		color: #ffbf13;
	}

	.icon-add {
		font-size: 36upx;
		color: #ffbf13;
	}

	.memberList {
		display: flex;
		flex-direction: column;
		padding: 10upx 18upx;

		.row {
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 16upx;
			padding: 44upx 50upx;
			display: flex;
			align-items: center;
			margin-bottom: 16upx;
			text{
				font-size: 32upx;
				color: #202932;
				height: 38upx;
			}
			text:first-child{
				display: inline-block;
				width: 160upx;
				flex-flow: 0;
				overflow: hidden;
				margin-right: 20upx;
			}
		}
	}
</style>
